<template>
  <button @mousedown.right="showTest('按下的是鼠标右键')">鼠标右键按下</button>
  <!-- 鼠标右键按下 -->

  <hr />
  <button @click.middle="showTest('按下的是鼠标中键')">点击时，采用的是鼠标中键</button>
  <!-- 点击时，采用的是鼠标中键 -->

  <hr />
  <button @mousedown.left="showTest('按下的是鼠标左键')">鼠标左键按下</button>
  <!-- 鼠标左键按下 -->
</template>

<script setup>
function showTest(text) {
  window.alert(text)
}
</script>

<style scoped>
button {
  border: none;
  padding: 15px 20px;
}

button:active {
  box-shadow: 0 0 5px grey;
}
</style>
